<script  setup>
// 文章流组件
import ArticleCardFull from '@/components/article/ArticleCardFull.vue';
import { ref, onMounted } from 'vue';
import { getIndexTime } from '@/apis/home';

const articleList = ref([]);

onMounted(() => {
  // 从后端获取数据
  // getIndexTime().then(res => {
  //   articleList.value = res.data.page.list;
  //   console.log('首页返回数据',articleList.value);
  // });

  // 模拟的数据流
  articleList.value = [{
    aid: 1,
    author:"快乐星球",
    createTime:"2023-05-29T23:57:19",
    description:"Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue。无论再怎么灵活，Vue 的核心知识在所有这些用例中都是通用的。即使你现在只是一个初学者，随着你的不断成长，到未来有能力实现更复杂的项目时，这一路上获得的知识依然会适用。",
    likeCount:1,
    pageView:24,
    status:true,
    title:"vue3新增功能",
    type:"vue",
    uavator:"https://img0.baidu.com/it/u=1091210682,206783907&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1684602000&t=1813754cb45a25a646263c4b3a711514",
    updateTime:"2023-06-02T11:53:17"
  }, {
    aid: 2,
    author:"快乐星球",
    createTime:"2023-05-29T23:57:19",
    description:"Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue。无论再怎么灵活，Vue 的核心知识在所有这些用例中都是通用的。即使你现在只是一个初学者，随着你的不断成长，到未来有能力实现更复杂的项目时，这一路上获得的知识依然会适用。",
    likeCount:6,
    pageView:34,
    status:true,
    title:"axios获取请求",
    type:"axios",
    uavator:"https://img0.baidu.com/it/u=1091210682,206783907&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1684602000&t=1813754cb45a25a646263c4b3a711514",
    updateTime:"2023-06-02T11:53:17"
  },{
    aid: 3,
    author:"快乐星球",
    createTime:"2023-05-29T23:57:19",
    description:"axios获取请求.Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。无论再怎么灵活，Vue 的核心知识在所有这些用例中都是通用的。",
    likeCount:6,
    pageView:34,
    status:true,
    title:"axios获取请求",
    type:"axios",
    uavator:"https://img0.baidu.com/it/u=1091210682,206783907&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1684602000&t=1813754cb45a25a646263c4b3a711514",
    updateTime:"2023-06-02T11:53:17"
  }]
});

</script>

<template>
  <div>
    <ArticleCardFull :articleList="articleList" />
  </div>
</template>
